<script setup>
import { ref, watch, nextTick } from "vue"

const state = ref(true);

watch(state, () => {
    nextTick(() => {
        if (typeof document !== 'undefined') {
            document.querySelectorAll('details.details.custom-block').forEach(e => e.open = state.value);
        }
    }); // waiting for DOM
}, { immediate: true });

const closeHandler = () => {
    state.value = false;
}
const openHandler = () => {
    state.value = true;
}

</script>

<template>
    <div class="container">
        details:
        <button class="switch_btn" @click="closeHandler">
            <div class="switch_icon" :class="{ 'active': !state }">关闭</div>
        </button>
        |
        <button class="switch_btn" @click="openHandler">
            <div class="switch_icon" :class="{ 'active': state }">展开</div>
        </button>
    </div>
</template>

<style scoped>
div.container {
    display: inline-flex;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 4px;
}

button.switch_btn {
    cursor: pointer;
}

.switch_icon {
    border-radius: 4px;
    padding: 0 4px;
    transition: all .2s;
}

.switch_icon.active {
    background-color: plum;
    font-weight: bold;
}
</style>